<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/component/layui/css/layui.css" />
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
</head>

<body class="pear-container">

    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">购买</li>
                    <li>出售</li>
                    <li>我的购买</li>
                    <li>我的出售</li>
                </ul>

                <div class="layui-tab-content">

                    <div class="layui-tab-item layui-show">
                        <div class="layui-field-box layui-form layui-form-pane">
                            <div class="layui-form-item">
                                <table id="buytable" lay-filter="buytable"></table>
                            </div>
                        </div>
                    </div>

                    <div class="layui-tab-item">
                        <blockquote id="fee-info" class="layui-elem-quote" style="margin-top: 30px;">
                            说明：手续费按上架物品价格计算。手续费=价格*手续费(若手续费价格为小数，则向上取整)
                        </blockquote>
                        <div class="layui-field-box layui-form layui-form-pane">

                            <div class="layui-form-item">
                                <label class="layui-form-label">可售物品</label>
                                <div class="layui-input-inline">
                                    <select id="goodsid" name="goodsid" class="form-control selectpicker" title="请选择物品"
                                        lay-search>
                                        <option value="">请选择物品(可输入查询)</option>
                                        {volist name="GoodsLs" id="goods"}
                                        <option value="{$goods.goodsid}">{$goods.goodname}</option>
                                        {/volist}
                                    </select>

                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">数量</label>
                                <div class="layui-input-inline">
                                    <input type="number" name="sellnum" id='sellnum' placeholder="出售数量(Max11)"
                                        autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">价格</label>
                                <div class="layui-input-inline">
                                    <input type="number" name="sellprice" id='sellprice' placeholder="出售价格"
                                        autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-btn-container">
                                    <button type="button"
                                        class="layui-btn layui-btn-normal layui-btn-fluid layui-btn-lg" id="mailAdd"
                                        value="出售">添加出售物品
                                    </button>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <table id="shelltable" lay-filter="shelltable"></table>
                            </div>
                        </div>

                    </div>

                    <div class="layui-tab-item">
                        <div class="layui-form-item">
                            <table id="mybuytable" lay-filter="mybuytable"></table>
                        </div>
                    </div>

                    <div class="layui-tab-item">
                        <div class="layui-form-item">
                            <table id="myshelltable" lay-filter="myshelltable"></table>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="goodstatusTpl">
            {{# if(d.goodstatus == '1'){ }}
                <button type="button" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">售卖中</button>
            {{# } else if(d.goodstatus == '2'){ }}
                <button type="button" class="layui-btn layui-btn-primary layui-border-orange layui-btn-xs">已出售</button>
            {{# } else if(d.goodstatus == '3'){ }}
                <button type="button" class="layui-btn layui-btn-primary layui-border-red layui-btn-xs">已下架</button>
            {{# } }}
    </script>

    <script type="text/html" id="toolbar">
        <div class="layui-inline">
            <input type="text" id='goodsname' name="goodsname" placeholder="物品名称" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="refr"><i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop">&#xe63e;</i> 搜索丨刷新</button>
        </div>
    </script>

    <script type="text/html" id="options">
        <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="remove">下架</button>
    </script>

    <script type="text/html" id="options1">
        <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="buy">购买</button>
    </script>



    <script>
        layui.use(['table', 'form', 'jquery', 'common', 'laydate'], function () {
            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;
            let common = layui.common;
            let laydate = layui.laydate;
            
            let PATH = "{$Request.root}/";

            const urlParams = new URLSearchParams(window.location.search);
            const actorid = urlParams.get('actorid');
            const serverid = urlParams.get('serverid');

            // 监听切换面板事件
            $('.layui-tab-title li').on('click', function () {
                currentIndex = $(this).index();
            });

            //------------------------------------------------------------ 出售
            var cols = [
                [{
                    field: "id",
                    title: "id",
                    unresize: "true",
                    align: "center",
                    hide: true
                }, {
                    field: "shellgoodsid",
                    title: "物品id",
                    unresize: "true",
                    align: "center",
                    hide: true
                }, {
                    title: '操作',
                    toolbar: '#options',
                    unresize: true,
                    align: 'center',
                    width: 115,
                    sort: true // 开启排序
                }, {
                    field: "shellgoodsname",
                    title: "名称",
                    unresize: "true",
                    align: "center",
                    sort: true // 开启排序
                }, {
                    field: "shellgoodsnum",
                    title: "数量",
                    unresize: "true",
                    align: "center"
                    , sort: true
                }, {
                    field: "shellgoodsprice",
                    title: "价格",
                    unresize: "true",
                    align: "center"
                    , sort: true
                }, {
                    field: "goodshandingfees",
                    title: "手续费",
                    unresize: "true",
                    align: "center"
                    , sort: true
                }, {
                    field: "shellplaygrotime",
                    title: "上架时间",
                    unresize: "true",
                    align: "center",
                    width: 180
                    , sort: true
                }]
            ]

            table.render({
                elem: '#shelltable',
                url: PATH + 'getShellList',
                page: true,
                cols: cols,
                limit: 10,
                limits: [10, 30, 50, 100, 200, 500, 1000],
                cellMinWidth: 100,
                skin: 'line',
                sort: true, // 开启排序
                where: {
                    actorid: actorid,
                    serverid: serverid
                } // 设置默认查询条件
            });

            //------------------------------------------------------------购买
            var cols1 = [
                [{
                    field: "id",
                    title: "id",
                    unresize: "true",
                    align: "center",
                    hide: true
                }, {
                    field: "shellgoodsid",
                    title: "物品id",
                    unresize: "true",
                    align: "center",
                    hide: true
                }, {
                    title: '操作',
                    toolbar: '#options1',
                    unresize: true,
                    align: 'center',
                    width: 115
                }, {
                    field: "shellgoodsname",
                    title: "名称",
                    unresize: "true",
                    align: "center"
                    , sort: true
                }, {
                    field: "shellgoodsnum",
                    title: "数量",
                    unresize: "true",
                    align: "center"
                    , sort: true
                }, {
                    field: "shellgoodsprice",
                    title: "价格",
                    unresize: "true",
                    align: "center"
                    , sort: true
                }, {
                    field: "shellplaygrotime",
                    title: "上架时间",
                    unresize: "true",
                    align: "center",
                    width: 180
                    , sort: true
                }]
            ]

            table.render({
                elem: '#buytable',
                url: PATH + 'getbuylList',
                page: true,
                cols: cols1,
                limit: 10,
                limits: [10, 30, 50, 100, 200, 500, 1000],
                cellMinWidth: 100,
                toolbar: '#toolbar',
                defaultToolbar: [],
                skin: 'line',
                where: {
                    actorid: actorid,
                    serverid: serverid
                }
            });

            table.on('toolbar(buytable)', function (obj) {
                if (obj.event === 'refr') {
                    // 获取查询条件
                    var searchCondition = $('#goodsname').val();
                    table.reload('buytable', {
                        where: {
                            shellgoodsname: searchCondition
                        },
                        page: { curr: 1 }
                    });
                    return false;
                }
            });


            //------------------------------------------------------------我的购买
            var cols2 = [
                [{
                    field: "id",
                    title: "id",
                    unresize: "true",
                    align: "center",
                    hide: true
                }, {
                    field: "shellgoodsname",
                    title: "名称",
                    unresize: "true",
                    align: "center"
                    , sort: true
                }, {
                    field: "shellgoodsnum",
                    title: "数量",
                    unresize: "true",
                    align: "center"
                    , sort: true
                }, {
                    field: "shellgoodsprice",
                    title: "价格",
                    unresize: "true",
                    align: "center"
                    , sort: true
                }, {
                    field: "shellplaynikename",
                    title: "卖家",
                    unresize: "true",
                    align: "center"
                    , sort: true
                }, {
                    field: "shellplayserverid",
                    title: "区服",
                    unresize: "true",
                    align: "center"
                    , sort: true
                }, {
                    field: "buyplaygortime",
                    title: "购买时间",
                    unresize: "true",
                    align: "center",
                    width: 180
                    , sort: true
                }]
            ]

            table.render({
                elem: '#mybuytable',
                url: PATH + 'getmybuylList',
                page: true,
                cols: cols2,
                limit: 10,
                limits: [10, 30, 50, 100, 200, 500, 1000],
                cellMinWidth: 100,
                defaultToolbar: [],
                skin: 'line',
                where: {
                    actorid: actorid,
                    serverid: serverid
                }
            });


            //------------------------------------------------------------我的售卖
            var cols3 = [
                [{
                    field: "id",
                    title: "id",
                    unresize: "true",
                    align: "center",
                    hide: true
                }, {
                    field: "shellgoodsname",
                    title: "名称",
                    unresize: "true",
                    align: "center"
                    , sort: true
                }, {
                    field: "shellgoodsnum",
                    title: "数量",
                    unresize: "true",
                    align: "center"
                    , sort: true
                }, {
                    field: "shellgoodsprice",
                    title: "价格",
                    unresize: "true",
                    align: "center"
                    , sort: true
                }, {
                    field: "goodshandingfees",
                    title: "手续费",
                    unresize: "true",
                    align: "center"
                    , sort: true
                }, {
                    field: "goodstatus",
                    title: "状态",
                    unresize: "true",
                    align: "center"
                    , sort: true,
                    templet: '#goodstatusTpl'
                }, {
                    field: "buyplaynikename",
                    title: "购买者",
                    unresize: "true",
                    align: "center"
                    , sort: true
                }, {
                    field: "buyplayserverid",
                    title: "区服",
                    unresize: "true",
                    align: "center"
                    , sort: true
                }, {
                    field: "buyplaygortime",
                    title: "购买时间",
                    unresize: "true",
                    align: "center",
                    width: 180
                    , sort: true
                }]
            ]

            table.render({
                elem: '#myshelltable',
                url: PATH + 'getmyShellList',
                page: true,
                cols: cols3,
                limit: 10,
                limits: [10, 30, 50, 100, 200, 500, 1000],
                cellMinWidth: 100,
                defaultToolbar: [],
                skin: 'line',
                where: {
                    actorid: actorid,
                    serverid: serverid
                }
            });



            return false;
        });
    </script>
</body>

</html>